<template>
    <div
        class="carousel-item-container"
        ref="container"
    >
        <div class="carousel-img" ref="image" :style="imagePosition">
            <div class="image-loader-container">
                <img
                    v-if="!everythingDone"
                    class="placeholder"
                    :src="midImgUrl"
                />
                <img
                    @load="handleLoad"
                    :src="bigImgUrl"
                    :style="{
                        opacity: originOpacity,
                        transition: `${duration}ms`,
                    }"
                />
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bigImgUrl: require("@/assets/images/bg.jpg"),
            midImgUrl: require("@/assets/images/bg.jpg"),
            duration: 500,
            originLoaded: false, //  原图是否加载完成
            everythingDone: false, // 是否一切都尘埃落定了
            titleWidth: 0,
            descWidth: 0,
            containerSize: null, // 外层容器的尺寸
            innerSize: null, // 里层图片的尺寸
        };
    },
    props:{
        mouseX: {
            required:false,
            default:0,
        }, // 鼠标的横坐标
        mouseY:{
            required:false,
            default:0,
        }, // 鼠标的纵坐标
    },
    computed: {
        originOpacity() {
            return this.originLoaded ? 1 : 0;
        },
        //得到图片坐标
        imagePosition() {
            if (!this.innerSize || !this.containerSize) {
                return;
            }
            const extraWidth = this.innerSize.width - this.containerSize.width; // 多出的宽度
            const extraHeight =
                this.innerSize.height - this.containerSize.height; //多出的高度
            const left = (-extraWidth / this.containerSize.width) * this.mouseX;
            const top =
                (-extraHeight / this.containerSize.height) * this.mouseY;
            return {
                transform: `translate(${left}px, ${top}px)`,
            };
        },
        center() {
            return {
                x: this.containerSize.width / 2,
                y: this.containerSize.height / 2,
            };
        },
    },
    mounted() {
        this.setSize();
        window.addEventListener("resize", this.setSize);
    },
    destroyed() {
        window.removeEventListener("resize", this.setSize);
    },
    methods: {
        handleLoad() {
            this.originLoaded = true;
            setTimeout(() => {
                this.everythingDone = true;
                this.$emit("load");
            }, this.duration);
        },
        setSize() {
            this.containerSize = {
                width: this.$refs.container.clientWidth,
                height: this.$refs.container.clientHeight,
            };

            this.innerSize = {
                width: this.$refs.image.clientWidth,
                height: this.$refs.image.clientHeight,
            };
        },
    },
};
</script>

<style lang="less" scoped>
@import "~@/assets/css/var.less";
@import "~@/assets/css/mixin.less";
.carousel-item-container {
    // background: @dark;
    width: 100%;
    height: 100%;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.carousel-img {
    width: 110%;
    height: 110%;
    position: absolute;
    left: 0;
    top: 0;
    transition: 0.3s;
    .image-loader-container {
        width: 100%;
        height: 100%;
        position: relative;
        overflow: hidden;
        img {
            .self-fill();
            object-fit: cover;
        }

        .placeholder {
            filter: blur(2vw);
        }
    }
}
</style>